﻿<template>
    <div style="position:relative;padding-bottom:50px;">
        <div style="position:absolute;top:-50px;right:0">
            <Button :type="listBtn" shape="circle" style="margin-right:10px;" @click="toggleShow('listBtn')">列表显示</Button>
            <Button :type="mapBtn" shape="circle" @click="toggleShow('mapBtn')">地图显示</Button>
        </div>
        <div v-show="listBtn == 'primary'">
            <Table :columns="columns1"  :data="publicCityList" :loading="load" highlight-row @on-current-change="publicDetails"></Table>
            <div style="padding: 10px;overflow: hidden">
                <div style="float: right;">
                    <Page :total="pageTotal"
                          :current="pageNum"
                          :page-size="pageSize"
                          @on-change="handlePage"
                          @on-page-size-change="handlePageSize"
                          show-elevator
                          show-total
                          show-sizer></Page>
                </div>
            </div>
        </div>
        <Card v-show="mapBtn == 'primary'">
            <Row style="padding: 10px">
                <Col span="2">
                <p>报告类型 ：</p>
                </Col>
                <Col class="content-p" span="21">
                    <ul style="list-style:none;display:flex;cursor:pointer;">
                        <li v-for="(item,index) in reportTypeList" :key="index" @click="selectReportType" style="padding-right:20px;" :class='index==0 ?"activeColor":""'>{{item}}</li>
                    </ul>
                </Col>
            </Row>
            <Row style="padding: 10px">
                <Col span="2">
                <p>地区选择 ：</p>
                </Col>
                <Col class="content-p" span="22">
                    <ul style="list-style:none;display:flex;cursor:pointer;flex-wrap:wrap">
                        <li v-for="(item,index) in areaselection" :key="index" @click="selectProvince" style="padding-right:20px;" :class='index==0 ? "activeColor":""'>{{item}}</li>
                    </ul>
                </Col>
            </Row>
            <Row style="padding: 10px">
                <Col span="2">
                <p>&nbsp;</p>
                </Col>
                <Col class="content-p" span="21">
                    <Row>
                        <Col span="6">
                            <Select v-model="selectInner.MProvince" style="width:180px" placeholder="省份" @on-change="change">
                                <Option v-for="item in cityList" :value="item.name" :key="item.name">{{ item.name }}</Option>
                            </Select>
                        </Col>
                        <Col span="6">
                            <Select v-model="selectInner.MCity" style="width:180px" placeholder='城市'>
                                <Option v-for="item in cities" :value="item.name" :key="item.name">{{ item.name }}</Option>
                            </Select>
                        </Col>
                    </Row>
                </Col>
            </Row>
            <Row style="padding: 10px">
                <Col span="2">
                <p style="line-height:32px;">公示时间：</p>
                </Col>
                <Col class="content-p" span="21">
                <Row>
                    <Col span="6">
                    <DatePicker v-model="selectInner.start" @on-change='startTime' type="date" placeholder="选择开始时间" style="width: 180px"></DatePicker>
                    </Col>

                    <Col span="6">
                    <DatePicker v-model="selectInner.end" @on-change='endTime' type="date"  placement="bottom-end"
                        placeholder="选择结束时间" style="width: 180px"></DatePicker>
                    </Col>

                    <Col span="6">
                    <Input v-model="selectInner.searchText" placeholder="请输入关键词" style="width: 180px" />
                    </Col>
                    <Col span="4">
                    <Button type="primary" style="width:80px;" @click="searchMap">查找</Button>
                    </Col>
                </Row>
                </Col>
            </Row>
		<Button type="primary" @click="quanping">全屏显示</Button>
            <Card :bordered="false">
                <p slot="title">
                    项目数量：{{this.mapProjectNum}}个
                </p>
                <div id="hybid">
 		<div @click="tuichu" id="quan" class="tuichu">退出全屏</div>
 		<baidu-map  map-type-id="hybrid" :center="center" :zoom="6"  style="width: 100%; height: 100%;" mapType="BMAP_HYBRID_MAP" :scroll-wheel-zoom="true" ak="LVf1osslOvyXyglNCsg2ULK9otcY6P2o">
                    <bm-marker
                      :position="m.position"
                      :opacity="m.opacity"
                     :clickable='true'
                     @click="mapModal(m.id)"
                     v-for="(m,index) in markers"
                     :key="index"
		          >
                    </bm-marker>
                </baidu-map>
	      </div>
            </Card>
        </Card>
        <Modal
            v-model="modalMap"
            title="公示"
            cancel-text=""
            width="600"
            @on-ok="ok">
            <p>项目名称：{{mapUpInfo.Title}}</p>
            <p>建设单位：{{mapUpInfo.BuildUnit}}</p>
            <p style="margin-bottom:10px;">报告类型：{{mapUpInfo.ReportType}} {{mapUpInfo.Industry}}</p>
            <!-- <div v-if="Fourlist.length>0">
                <p v-if="Fourlist[0]"><a @click="jumpDes(Fourlist[0].id)">{{Fourlist[0].title}}  {{Fourlist[0].createTime}} &gt;&gt;</a></p>
                <p v-if="Fourlist[1]"><a @click="jumpDes(Fourlist[1].id)">{{Fourlist[1].title}}  {{Fourlist[1].createTime}} &gt;&gt;</a></p>
                <p v-if="Fourlist[2]"><a @click="jumpDes(Fourlist[2].id)">{{Fourlist[2].title}}  {{Fourlist[2].title}} &gt;&gt;</a></p>
                <p v-if="Fourlist[3]"><a @click="jumpDes(Fourlist[3].id)">{{Fourlist[3].title}}  {{Fourlist[3].title}} &gt;&gt;</a></p>
            </div>  -->
        </Modal>
    </div>
</template>

<script>
    import {formatDate} from '../libs/tools';
    import CityList from '../libs/city.js';
    //百度地图
    import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
    import BmScale from 'vue-baidu-map/components/controls/Scale'
    import BmNavigation from 'vue-baidu-map/components/controls/Navigation'
    import BmMarkerClusterer from  'vue-baidu-map/components/extra/MarkerClusterer'
    import BmMarker from 'vue-baidu-map/components/overlays/Marker'
    import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow'
    export default {
	name: "pm-distribution",
        components: {
            BaiduMap,
            BmScale,
            BmNavigation,
            BmMarkerClusterer,
            BmMarker,
            BmInfoWindow
        },
        props: {
            state: {
                default: 2
            },
            projectType: {
                default: ''
            },
            detailParams: {
              default: 'true' //  加true是首页传过去的，其它不加true
            }
        },
        data() {
            return {
                // 报告类型
                reportTypeList: ['全部', '报告表', '报告书', '现状评估报告', '规划', '验收'],
                // 地区选择
                areaselection: [
                    '全国', '安徽', '北京', '福建', '甘肃', '天津', '重庆', '四川', '河南', '上海', '贵州', '云南', '湖北', '湖南', '广东', '广西', '陕西', '甘肃', '宁夏', '河北', '山西', '江苏', '浙江', '山东', '吉林',
                ],
                // 选择内容
                selectInner: {
                    'ReportType': '',
                    MProvince: '',
                    MCity: '',
                    start: '',
                    end: '',
                    searchText: ''
                },
                mapProjectNum: '0',
                // 地图弹框
		modalMap:false,
                // 地图点标记
                markers: [],
                mapUpInfo: {},
                Fourlist: {},
                // 地图中心城市
                center: { lng: 83 ,lat: 45},
                // 按钮颜色
                listBtn: 'primary',
                mapBtn: 'default',
                cityList: CityList,
                cities: [],
                columns1: [
                    {
                        title: "环评公示",
                        key: "Title",
                        render:  (h, params) => {
                            return h('div',{
                                style:{color: '#333',fontWeight:600,fontSize:'15px',lineHeight:'50px'}
                            },params.row.Title)
                        }
                    },
                    {
                        width: 100,
                        align: "center",
                        title: "公示时间",
                        key: "PublicityTime",
                        render:  (h, params) => {
                            return h('div',
                                formatDate(new Date(params.row.PublicityTime),'yyyy-MM-dd'));/*这里的this.row能够获取当前行的数据*/
                        }
                    },
                ],
                publicCityList:[],
                pageTotal:0,
                pageNum: 1,
                pageSize: 20,
                load:true,
            };
        },
        // 地图组件
       
        methods: {
	    quanping(){
            var widths = document.getElementById("hybid");
            var quan = document.getElementById("quan");
            widths.style.width = document.body.clientWidth + "px";
            widths.style.height = document.body.clientHeight + "px";
            widths.classList.add("quanping");
            quan.style.display = "block";
         }, 
         tuichu(){
          var widths = document.getElementById("hybid");
          var quan = document.getElementById("quan");
          widths.classList.remove("quanping");
          quan.style.display = "none";
          widths.style.width = 100 + "%";
          widths.style.height = 500 + "px";
        },
            // 选择报告类型 省份
            selectReportType(e) {
                var liParent = e.target.parentNode
                liParent.querySelector('.activeColor').className = ''
                e.target.className = 'activeColor'
                this.selectInner.ReportType = e.target.innerText=='全部'?'':e.target.innerText
            },
            selectProvince(e) {
                var liParent = e.target.parentNode
                liParent.querySelector('.activeColor').className = ''
                e.target.className = 'activeColor'
                this.selectInner.MProvince = e.target.innerText=='全国'?'':e.target.innerText
            },
            // 地图选择开始结束时间
            startTime(data) {
                this.selectInner.start = data
            },
            endTime(data) {
                this.selectInner.end = data
            },
            // 地图跳转详情
            // jumpDes(id) {
            //     this.modalMap=false;
            //     this.$nextTick(()=>{
            //         this.$store.commit('toggleHotId',id)
            //         this.$router.push({name: 'PublicDetials'})
            //     })
            // },
            // 地图弹框确认按钮
            ok () {
                this.$Modal.remove()
            },
            mapModal(id) {
                this.modalMap=true
                this.$post('/publicity/findByPublicityId',{Id:id}).then(res=>{
                    this.mapUpInfo = res.publicity
                }).catch(err=>{
                    console.log(err)
                })
                // axios.post('/publicity/findfourPublicity').then(res=>{
                //     this.Fourlist = res.publicCityList

                // }).catch(err=>{
                //     console.log(err)
                // })
            },
            // 切换显示
            toggleShow(type) {
                if(type == "listBtn") {
                    this.listBtn = 'primary'
                    this.mapBtn = "default"
                }else if(type == "mapBtn") {
                    this.listBtn = 'default'
                    this.mapBtn = "primary"
                    this.findMarkers()
                }
            },
            // 查找地图点
            findMarkers(searchData) {
                var data = {
                    ProjectType: this.projectType,
                    MProvince: '',
                    MCity: '',
                    ReportType: '',
                    Title: '',
                    StartTime: '',
                    EndTime: ''
                }
                if(searchData) {
                    data.MProvince = searchData.MProvince
                    data.MCity = searchData.MCity
                    data.ReportType = searchData.ReportType
                    data.Title = searchData.Title
                    data.StartTime = searchData.StartTime
                    data.EndTime = searchData.EndTime
                }
                this.$post('/publicity/findByPublicity',data).then(res=>{
                    // console.log(res)
                    if(res.publicity.length == 0) {
                         this.$Modal.info({
                            title: '提示',
                            content: '搜索到0条结果，请选择详细条件'
                        });
                    }
                    if(data.MProvince && res.publicity.length>=1) {
                        this.center =  { lat: parseFloat(res.publicity[0].Lat), lng: parseFloat(res.publicity[0].Lng) }
                    }
                    this.markers = []
                    this.mapProjectNum = res.publicity.length
                    for(var i=0; i<res.publicity.length; i++) {
                        var dat = res.publicity[i]
                        this.markers.push({
                            position: { lat: parseFloat(dat.Lat), lng: parseFloat(dat.Lng) },
                            draggable: true,
                            enabled: true,
                            id: dat.Id
                        })
                    }
                }).catch(err=>{
                    console.log(err)
                })
            },
            // 公示详情
            publicDetails(currentRow,oldCurrentRow){
                this.$store.commit('toggleHotId',currentRow.Id+this.detailParams)
                this.$router.push({name: 'PublicDetials',params: {publicState:currentRow.ProjectType}})
            },
            getList(){
                this.load=true;
                this.$post('/publicity/findOneOrTwoPublicity',
                    {
                        PageIndex:this.pageNum-1,
                        PageSize:this.pageSize,
                        State:this.state,
                        ProjectType: this.projectType         //  为空 查找所有公示类型
                    }
                )
                    .then( (res) => {
                        this.publicCityList = res.publicCityList;
                        this.pageTotal = res.publicCityListNum;
                        this.load=false;
                    })
                    .catch( (error) => {
                        console.log(error);
                    });
            },
            handlePage(value) {
                this.pageNum = value
                this.getList();
            },
            handlePageSize(value) {
                console.log(value);
                this.pageSize = value
                this.getList();
            },
            // 省份联动
            change(val){
                this.selectInner.MCity = '';
                for(var i=0; i<this.cityList.length; i++){
                    if(val == this.cityList[i].name ){
                        this.cities = this.cityList[i].cityList;
                    }
                }
            },
            // 地图查找
            searchMap() {
                var searchData = {
                    MProvince: this.selectInner.MProvince,
                    MCity: this.selectInner.MCity,
                    'ReportType': this.selectInner.ReportType,
                    Title: this.selectInner.searchText,
                    StartTime: this.selectInner.start,
                    EndTime: this.selectInner.end
                }
                this.findMarkers(searchData)
            }
        },
        mounted() {
            this.getList();
        },
    };
</script>

<style scoped>
    #allmap {
        margin: auto;
        width: 95%;
        height: 600px;
        overflow: hidden;
    }

    .content-p {
        white-space: pre-line;
    }

    .content-p p {
        display: inline;
        margin-right: 15px;
    }
    .ivu-modal-body p {
        line-height: 25px;
    }
    .activeColor {
        color: #2D8CF0
    }
    #hybid{
      width:945px ;
      height:600px;
    }
.tuichu{
    position: absolute;
    right: 30px;
    top: 2%;
    width: 80px;
    height: 20px;
    background: #fff;
    text-align: center;
    border-radius: 3px;
    border: 1px solid #eee;
    z-index: 1000;
    display: none;
  }
  .quanping{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
  }
</style>
